import { useRecoilValueLoadable, useSetRecoilState } from "recoil";

import { currentUserIdState, userInfoQuery } from "./store";

export default function UserInfo({ userId }) {
  const setCurrentUserId = useSetRecoilState(currentUserIdState);

  const userInfoLoadable = useRecoilValueLoadable(userInfoQuery(userId));

  switch (userInfoLoadable.state) {
    case "hasValue":
      const user = userInfoLoadable.contents;
      return (
        <li key={user.id} onClick={() => setCurrentUserId(user.id)}>
          {user.name}
        </li>
      );
    case "loading":
      return <li>Loading ...</li>;
    case "hasError":
      throw userInfoLoadable.contents;
  }
}
